import 'package:flutter/material.dart';
import 'package:untitled9/profile_page.dart';
import 'package:untitled9/scenes_page.dart';

import 'home_page.dart';
import 'notification_page.dart';

class Page1 extends StatefulWidget {
  const Page1({super.key});

  @override
  State<Page1> createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  List _pages = [HomePage(), ScenesPage(), NotificationPage(), ProfilePage()];
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    double scrW = MediaQuery.of(context).size.width;
    double scrH = MediaQuery.of(context).size.height;

    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: Container(
        height: 80,
        color: Color.fromRGBO(233, 223, 224, 1.0),
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 30),
          margin: EdgeInsets.only(top: 5),
          child: Row(
            children: [
              GestureDetector(
                onTap: () {
                  setState(() {
                    _currentIndex = 0;
                  });
                },
                child: Container(
                  width: (scrW - 60) / 4,
                  child: Column(
                    children: [
                      Container(
                        width: 50,
                        height: 50,
                        child: Center(
                          child: Text('image'),
                        ),
                        decoration: BoxDecoration(
                            border: Border.all(
                                width: 1,
                                color: _currentIndex == 0
                                    ? Colors.red
                                    : Colors.grey),
                            color: Colors.white),
                      ),
                      Text('Home')
                    ],
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    _currentIndex = 1;
                  });
                },
                child: Container(
                  width: (scrW - 60) / 4,
                  child: Column(
                    children: [
                      Container(
                        width: 50,
                        height: 50,
                        child: Center(
                          child: Text('image'),
                        ),
                        decoration: BoxDecoration(
                            border: Border.all(
                                width: 1,
                                color: _currentIndex == 1
                                    ? Colors.red
                                    : Colors.grey),
                            color: Colors.white),
                      ),
                      Text('Scenes')
                    ],
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    _currentIndex = 2;
                  });
                },
                child: Container(
                  width: (scrW - 60) / 4,
                  child: Column(
                    children: [
                      Container(
                        width: 50,
                        height: 50,
                        child: Center(
                          child: Text('image'),
                        ),
                        decoration: BoxDecoration(
                            border: Border.all(
                                width: 1,
                                color: _currentIndex == 2
                                    ? Colors.red
                                    : Colors.grey),
                            color: Colors.white),
                      ),
                      Text('Notification')
                    ],
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    _currentIndex = 3;
                  });
                },
                child: Container(
                  width: (scrW - 60) / 4,
                  child: Column(
                    children: [
                      Container(
                        width: 50,
                        height: 50,
                        child: Center(
                          child: Text('image'),
                        ),
                        decoration: BoxDecoration(
                            border: Border.all(
                                width: 1,
                                color: _currentIndex == 3
                                    ? Colors.red
                                    : Colors.grey),
                            color: Colors.white),
                      ),
                      Text('Profile')
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
